<template>
  <div>
    <div class="main">
      <div class="serch">
        <div class="a">
          <div class="serch-rem">
            <label for="name">姓名:</label>
            <input
              type="text"
              name="name"
              id="name"
              placeholder="联系人姓名"
              v-model="contact"
            />
          </div>

          <div class="serch-rem">
            <label for="num">手机号:</label>

            <input
              type="text"
              name="num"
              id="num"
              placeholder="联系人手机号查询"
              v-model="phone"
            />
          </div>

          <div class="serch-rem">
            <span>大客户行业:</span>
            <!-- <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> -->

            <select v-model="industry">
              <option
                class="gra"
                value=""
                v-for="(item, index) in bigindustry"
                :key="index"
              >
                {{ item }}
              </option>
            </select>
          </div>

          <div class="serch-rem">
            <label for="Company">单位:</label>
            <input
              type="text"
              name="Company"
              id="Company"
              placeholder="单位查询"
              v-model="Company"
            />
          </div>
        </div>

        <AreaSelect>
          <template class="province" v-slot:province>请选择省:</template>
          <template v-slot:city>请选择市:</template>
          <template v-slot:area>请选择区：</template>
        </AreaSelect>
      </div>

      <div class="c">
        <div class="c-1">
          <div class="c-1-1">
            <div class="_add" @click="add">+添加大客户专员</div>
            <span>大客户专员:</span>
            <input type="radio" name="1" checked="checked" />
            大客户专员
            <input type="radio" name="1" />
            大客户所属下级
          </div>

          <div class="c-1-2">
            <el-button type="primary" @click="reset">重置</el-button>
            <el-button type="primary" @click="serch">查询</el-button>
          </div>
        </div>

        <my-table :th="th" :height="height">
          <th slot="th">操作</th>

          <template v-for="(tritem, idx) in td">
            <tr :key="idx">
              <td>{{ idx + 1 }}</td>
              <td>{{ tritem.contactsName }}</td>
              <td>{{ tritem.phone }}</td>
              <td>
                {{
                  dayjs(new Date(tritem.timer)).format("YYYY-MM-DD HH:mm:ss")
                }}
              </td>
              <td>{{ tritem.Sales_name }}</td>
              <td>{{ tritem.sales_calls }}</td>
              <td>{{ tritem.province }}</td>
              <td>{{ tritem.city }}</td>
              <td>{{ tritem.area }}</td>
              <td>
                <el-switch
                  v-model="tritem.Account_status"
                  active-text="开"
                  inactive-text="关"
                  @change="changestate(tritem.Account_status, tritem._id)"
                >
                </el-switch>
              </td>
              <td slot="td" @click="jump(tritem)">
                <router-link
                  :to="'details?_id=' + tritem._id"
                  tag="span"
                  class="details"
                  >详情</router-link
                >
              </td>
            </tr>
          </template>
        </my-table>
      </div>

      
    </div>
   
    <router-view></router-view>
  </div>
</template>

<script>
import {
  GetBigCustomer,
  GetIndustry,
  SerchBigCustomer,
  ChangeState,
} from "../../api/bigcustomer";
import AreaSelect from "../../components/sales/areaSelect";
import { Bus } from "../../Bus/index";


export default {
  components: {
    AreaSelect,
  },
  data() {
    return {
      input: "",
      height: "400px",
      isShow: true,
      bigindustry: [],
      contact: "",
      phone: "",
      industry: "",
      Company: "",
      a: {
        province: "",
        city: "",
        area: "",
      },

      tapnumber: 1,
      th: [
        "ID",
        "联系人",
        "手机号",
        "开通时间",
        "代理人",
        "联系电话",
        "省",
        "市",
        "区",
        "账号状态",
      ],
      td: [],
      _td: [],
    };
  },
  beforeCreate() {
    GetIndustry({}).then((res) => {
      this.bigindustry = res.data;
    });
    GetBigCustomer({}).then((res) => {
      this.td = res.data;
      //存值
      this._td = res.data;
      let datas = res.data;
      const newData = res.data;

      const target = newData.forEach((element, idx) => {
        element.timer = this.dayjs(element.timer).format("YYYY-MM-DD HH:mm:ss");
      });
    });
  },
  mounted() {
    //三级联动
    Bus.$emit("isshowcity", this.isShow);
    Bus.$emit("isshowarea", this.isShow);
    Bus.$on("areadatas", (val) => {
      this.a = val;
    });
  },
  methods: {
    //添加大客户
    add() {
      this.$store.commit("changeAdd");
    },
    //重置
    reset() {
      this.td = this._td;
      this.contact = "";
      this.phone = "";
      this.Company = "";
    },
    //搜索
    serch() {
      let data = {
        contactsName: this.contact,
        phone: this.phone,
        industry: this.industry,
        Company: this.Company,
        province: this.a.province,
        city: this.a.city,
        area: this.a.area,
      };
      for (var k in data) {
        if (data[k] == "") {
          delete data[k];
        }
      }
      SerchBigCustomer(data).then((res) => {
        this.td = res.data;
      });
    },
    reduce() {
      if (this.tapnumber == 0) return;
      this.tapnumber--;
    },

    _add() {
      this.tapnumber++;
    },
    jump(_id) {
      console.log(_id);
      Bus.$emit("_id", _id);
    },
    //更改状态
    changestate(state, id) {
      state = !state;
      ChangeState({ _id: id }).then((res) => {
        setTimeout(function () {
          alert(res.msg);
        }, 500);
      });
    },
  },
};
</script>

<style scoped lang='less'>
input::-webkit-input-placeholder {
  /* placeholder颜色  */
  color: #c4c7cf;
}
input {
  cursor: pointer;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s;
}
select {
  width: 206px;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #c8c7cf;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.space {
  display: flex;
  justify-content: space-between;
}
.main {
  padding: 0 20px;
}
.serch {
  box-sizing: border-box;
  height: 150px;
  padding: 20px 0;
}
.a {
  box-sizing: border-box;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.c {
  height: 200px;
  // background-color: #d7d7d7;
}

.c-1 {
  height: 50px;
  display: flex;
  justify-content: space-between;
  .c-1-1 {
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      margin: 0 10px;
    }
    input {
      width: 15px;
    }
    ._add {
      cursor: pointer;
      padding: 0 10px;
      height: 30px;
      line-height: 30px;
      background-color: #0084f4;
      color: #e3ffff;
    }
  }
  .c-1-2 {
    width: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.c-3 {
  display: flex;
  justify-content: flex-end;
  .c-3-1 {
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    select {
      width: 100px;
    }
    .pre,
    .next,
    .number {
      width: 20px;
      height: 20px;
      border: 1px solid #f7f7f7;
    }
    .number {
      border: 1px solid #95caed;
    }
  }
}

.details,
.status {
  cursor: pointer;
}
.status {
  position: relative;
}
.amend {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #c1c1c1;
}
.issure {
  color: red;
}
.sure {
  font-size: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #009ffe;
  color: #f7f7f7;
  border-radius: 20%;
}
</style>